<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="lab3-1.css">
</head>
<body>
    <div class="box-container">
        <h2>盒子模型示例</h2>
        <div class="box standard-box">
            标准盒子模型
            <span class="box-label">width=200px（仅内容）</span>
        </div>

        <div class="box border-box">
            IE盒子模型
            <span class="box-label">width=200px（含内边距和边框）</span>
        </div>

        <div class="box margin-example">
            外边距示例
            <span class="box-label">margin-top和margin-bottom更大</span>
        </div>
        
        <div class="box padding-example">
            内边距示例
            <span class="box-label">上下内边距更大</span>
        </div>

        <h2>完整盒子模型结构展示</h2>
        <!-- 新增：完整盒子模型结构展示 -->
        <div class="complete-box-model">
            <div class="model-margin">
                <div class="model-border">
                    <div class="model-padding">
                        <div class="model-content">
                            <div class="content-text">内容</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>